﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nieo查询小工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#60A5FA',    // 主色调
                        secondary: '#93C5FD',  // 辅助色
                        accent: '#3B82F6',     // 强调色
                        light: '#EFF6FF',      // 背景色
                        dark: '#000000'        // 文本色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }

            .window-shadow {
                box-shadow: 0 4px 20px rgba(96, 165, 250, 0.15);
            }

            .back-btn {
                @apply px-3 py-1 rounded text-sm bg-white/30 hover:bg-white/50 text-dark transition-colors duration-200 focus:outline-none focus:ring-1 focus:ring-dark;
            }

            .title-icon {
                @apply w-8 h-8 object-contain;
            }
        }
    </style>
</head>
<body class="bg-light font-sans text-gray-700">
    <!-- 主窗口容器 -->
    <div class="w-full max-w-4xl mx-auto bg-white shadow-xl rounded-lg overflow-hidden border border-primary/30 mt-4">
        <!-- 标题栏 -->
        <div class="bg-primary text-dark px-4 py-2 flex justify-between items-center">
            <div class="flex items-center gap-2">
                <img src="icons/Ico.png" alt="工具图标" class="title-icon">
                <span>Nieo查询小工具-by.城南以南</span>
            </div>

            <!-- 按钮容器 -->
            <div class="flex items-center gap-2">

                <!-- 返回首页按钮 -->
                <button id="backmain-button" class="back-btn" onclick="gomain()">
                    <i class="fa fa-home mr-1"></i> 首页
                </button>

                <!-- 返回主按钮 -->
                <button id="backmidlle-button" class="back-btn hidden" onclick="goMid()">
                    <i class="fa fa-home mr-1"></i> 主页
                </button>

                <!-- 返回上一页按钮 -->
                <button id="back-button" class="back-btn hidden" onclick="goBack()">
                    <i class="fa fa-arrow-left mr-1"></i> 上一页
                </button>
            </div>
        </div>

        <!-- 内容区域-->
        <div id="content-container" class="min-h-[500px] p-6">
            <!-- 主页面 -->
            <div id="main-page" class="page-content">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6">

                    <div class="card-hover" onclick="openPage('2')">
                        <div class="bg-white rounded-lg shadow p-4 text-center border border-secondary/30">
                            <img src="icons/黄金矿.png" alt="测试" class="w-20 h-20 mx-auto mb-2 object-contain ">
                            <b class="text-sm text-dark">测试</b>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 子页面 -->
            <div id="2" class="page-content hidden">

                <div class="card-hover" onclick="openPage('3')">
                    <div class="bg-white rounded-lg shadow p-4 text-center border border-secondary/30">
                        <img src="icons/希欧珊瑚.png" alt="ogdks" class="w-16 h-16 mx-auto mb-2 object-contain ">
                        <p class="text-sm text-dark">希欧珊瑚</p>
                    </div>
                </div>

            </div>



            <div id="3" class="page-content hidden">

                <div class="card-hover" onclick="openPage('xosh')">
                    <div class="bg-white rounded-lg shadow p-4 text-center border border-secondary/30">
                        <img src="icons/希欧珊瑚.png" alt="ogdks" class="w-16 h-16 mx-auto mb-2 object-contain ">
                        <p class="text-sm text-dark">希欧珊瑚3</p>
                    </div>
                </div>

            </div>


        </div>


    <script>
        // 栈（管理主子页面顺序）
        let pageStack = ['main-page'];

        /**
         * 打开新页面
         * @param {string} targetPageId - 目标页面ID
         */
        function openPage(targetPageId) {
            // 1. 获取当前显示的页面（栈顶）
            const currentPageId = pageStack[pageStack.length - 1];
            // 2. 隐藏当前页面，显示目标页面
            document.getElementById(currentPageId).classList.add('hidden');
            document.getElementById(targetPageId).classList.remove('hidden');
            // 3. 目标页面加入栈，记录顺序
            pageStack.push(targetPageId);
            // 4. 显示返回按钮（栈长度>1时）
            updateBackButtons();
        }

        /**
         * 逐级返回上一页
         */
        function goBack() {
            // 只剩主页面时不操作
            if (pageStack.length <= 1) return;
            // 1. 隐藏当前页面（栈顶）并移除
            const currentPageId = pageStack.pop();
            document.getElementById(currentPageId).classList.add('hidden');
            // 2. 显示上一级页面（新栈顶）
            const prevPageId = pageStack[pageStack.length - 1];
            document.getElementById(prevPageId).classList.remove('hidden');
            // 3. 更新返回按钮状态
            updateBackButtons();
        }

        // 返回首页
        function gomain() {
            // 只剩主页面时跳回index
            if (pageStack.length <= 1) location.href='index.html';

            // 隐藏当前页面
            const currentPageId = pageStack.pop();
            document.getElementById(currentPageId).classList.add('hidden');
        }

        //返回副子页
        function goMid() {

            // 隐藏当前页面
            const currentPageId = pageStack.pop();
            document.getElementById(currentPageId).classList.add('hidden');

            // 清空栈，只保留主页面
            pageStack = ['main-page'];

            // 显示主页面
            document.getElementById('main-page').classList.remove('hidden');

            // 更新返回按钮状态
            updateBackButtons();
        }

        // 更新返回按钮显示状态
        function updateBackButtons() {
            const shouldShow = pageStack.length > 1;
            document.getElementById('backmidlle-button').classList.toggle('hidden', !shouldShow);
            document.getElementById('back-button').classList.toggle('hidden', !shouldShow);
            document.getElementById('backmain-button').classList.toggle('hidden', shouldShow);
        }

        // 页面加载初始化
        document.addEventListener('DOMContentLoaded', function () {
            // 图片加载失败处理
            document.querySelectorAll('img').forEach(img => {
                img.onerror = function () {
                    this.style.display = 'none';
                    const icon = document.createElement('i');
                    icon.className = img.classList.contains('title-icon')
                        ? 'fa fa-search text-dark'
                        : 'fa fa-question-circle text-4xl text-primary mx-auto';
                    this.parentNode.insertBefore(icon, this);
                }
            });
        });

        // 检查是否从主页正常跳转过来
        const fromIndex = sessionStorage.getItem('fromIndex');

        if (fromIndex) {
            // 如果是正常跳转，清除标记（避免后续刷新时误判）
            sessionStorage.removeItem('fromIndex');
        } else {
            // 如果没有标记（说明是刷新或直接访问），跳回主页
            window.location.href = 'index.html';
        }

    </script>
</body>
</html>
